<template>
	<view class="container">
		<view class="top-wrapper m-20-25-0">
			<view class="address-wrapper he-auto" @click="address">
				<view class="text" v-if="addressList.length > 0">
					<view class="address">{{addressObj.provinceName}}{{addressObj.cityName}}{{addressObj.districtName}}{{addressObj.address}}</view>
					<view class="name-tel">{{addressObj.name}} {{addressObj.mobile}}</view>
				</view>
				<view class="text" v-else>
					<view class="address">请选择<text v-if="productDetails.type != 4">收货</text><text v-if="productDetails.type == 4">服务</text>地址</view>
				</view>
				<image src="/static/next02.png" class="icon"></image>
			</view>
		</view>
		<view class="content">
			<view v-for="(shop, index) in orderDetails.shops" :key="index">
				<view class="product-wrapper" v-for="product in shop.products" :key="product.productId">
					<image :src="product.productImage" mode="aspectFill" class="img"></image>
					<view class="text">
						<view class="name ell">{{product.productName}}</view>
						<view class="num">X{{product.num}}</view>	
					</view>
				</view>
			</view>
			<view class="order-infor">
				<view class="infor-item">
					<view class="title">积分</view>
					<view class="con">{{orderDetails.totalScore}}</view>	
				</view>
				<view class="infor-item">
					<view class="title">订单总价</view>
					<view class="con">¥{{orderDetails.totalFee}}</view>
				</view>
			</view>
		</view>
		<view class="payment-method-wrapper">
			<view class="title">选择支付方式</view>
			<view class="payment-method">
				<view class="payment-method-item" @click="selectPayMethod(1)">
					<image src="/static/balance.png" class="icon"></image>
					<view class="text">余额支付</view>
					<view class="checkbox-wrapper" :class="{'on': payMethod == 1}">
						<image class="checkbox on" src="/static/checkbox_on.png"></image>
						<image class="checkbox off" src="/static/checkbox.png"></image>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="payment-method-item wechat" @click="selectPayMethod(2)">
					<image src="/static/wechat.png" class="icon"></image>
					<view class="text">微信支付</view>
					<view class="checkbox-wrapper" :class="{'on': payMethod == 2}">
						<image class="checkbox on" src="/static/checkbox_on.png"></image>
						<image class="checkbox off" src="/static/checkbox.png"></image>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="payment-method-item alipay" @click="selectPayMethod(3)">
					<image src="/static/alipay.png" class="icon"></image>
					<view class="text">支付宝支付</view>
					<view class="checkbox-wrapper" :class="{'on': payMethod == 3}">
						<image class="checkbox on" src="/static/checkbox_on.png"></image>
						<image class="checkbox off" src="/static/checkbox.png"></image>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="menu-wrapper" :style="{ paddingBottom: tabbarBottom + 'px' }">
			<view class="text">
				<view class="title">合计</view>
				<view class="con">{{orderDetails.totalScore}}积分+{{orderDetails.totalFee}}元</view>
			</view>
			<button type="default" :disabled="submitFlag" class="btn" @click="createOrder">确认兑换</button>
		</view>
		<view class="place"></view>
	</view>
</template>

<script>
	import { buyNowConfirmOrder, buyNowCreateOrder } from '@/api/order.js'
	import { frontList } from '@/api/address.js'
	import payment from '@/mixins/payment.js'
	export default {
		mixins: [payment],
		data() {
			return {
				tabbarBottom: 0,
				submitFlag: false,
				isCheckedAddress: false,
				addressObj: {},
				addressList: [],
				productDetails: {},
				orderDetails: {},
				payMethod: ''
			}
		},
		onShow() {
			const fixSize = () => {
				const {
					safeAreaInsets,
					platform
				} = uni.getSystemInfoSync()
				
				console.log(uni.getSystemInfoSync())
				let barpx = 0
				if (safeAreaInsets && safeAreaInsets.bottom) {
					if (safeAreaInsets.bottom > 0) {
						barpx = safeAreaInsets.bottom
					} else {
						barpx = 0
					}
				}
				if(platform == "devtools"){
				    this.tabbarBottom = barpx || 6
				}else if(platform == "ios"){
					this.tabbarBottom = barpx || 30
				}else if(platform == "android"){
					this.tabbarBottom = barpx || 30
				}
			}
		
			
			fixSize()
			this.getAddressList()
		},
		onLoad(option) {
			this.getOrderDetails(option)
		},
		methods: {
			// 地址列表
			getAddressList() {
				if (this.isCheckedAddress) {
					return
				}
				frontList().then(respanse => {
				  this.addressList = respanse.result
				  for(let i = 0; i < this.addressList.length; i++) {
					  if (this.addressList[i].isDefault == 1) {
						  this.addressObj = this.addressList[i]
						  break
					  } else {
						  this.addressObj = this.addressList[0]
					  }
				  }
				})
			},
			
			// 获取订单详情
			getOrderDetails(option) {
				this.productDetails = JSON.parse(decodeURIComponent(option.productDetails))
				this.getBuyNowConfirmOrder()
			},
			
			// 立即购买获取订单
			getBuyNowConfirmOrder() {
				const {productCount, id} = this.productDetails
				const data = {
					num: productCount,
					productId: id
				}
				buyNowConfirmOrder(data).then(respanse => {
					this.orderDetails = respanse.result
				})
			},
			
			// 生成订单
			createOrder() {
				const {productCount, id} = this.productDetails
				if (!this.addressObj.id) {
					uni.showToast({
						title: '请选择地址！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.payMethod) {
					uni.showToast({
						title: '请选择支付方式！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.submitFlag = true
				//  立即购买生成订单
				const data = {
					addressId: this.addressObj.id,
					num: productCount,
					productId: id,
					payMethod: this.payMethod
				}
				buyNowCreateOrder(data).then(respanse => {
					this.createOrderDetails = respanse.result
					this.payment(2)
				}).catch(err => {
					this.submitFlag = false
				})
			},
			
			// 支付方式
			selectPayMethod(payMethod) {
				this.payMethod = payMethod
			},
			
			address() {
				uni.navigateTo({
					url: '/pages/address/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-20-25-0 {
		margin: 20rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.address-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		height: 104rpx;
		box-sizing: border-box;
		padding: 34rpx 22rpx 25rpx 35rpx;
		background-color: #fff;
		&.he-auto{
			height: auto;
		}
		&::before{
			left: 25rpx;
			right: 22rpx;
		}
		.text {
			flex: 1;
			.con{
				font-size: 28rpx;
				color: #000000;
			}
			.address {
				line-height: 46rpx;
				font-size: 36rpx;
				color: #000000;
			}
	
			.name-tel {
				margin-top: 16rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}
	
		.icon {
			width: 14rpx;
			height: 24rpx;
		}
	}
	
	.checkbox-wrapper {
		display: flex;
		align-items: center;
		.checkbox {
			width: 28rpx;
			height: 28rpx;
			&.on {
				display: none;
			}
	
			&.off {
				display: block;
			}
		}
		&.on{
			.checkbox.on{
				display: block;
			}
			.checkbox.off{
				display: none;
			}
		}
	}
	
	.content{
		padding: 24rpx 22rpx 16rpx 23rpx;
		margin: 17rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		.product-wrapper{
			padding: 10rpx 0;
			display: flex;
			.img{
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				background-color: #F5F5F5;
			}
			.text{
				flex: 1;
				padding-top: 17rpx;
				margin-left: 18rpx;
				overflow: hidden;
				.name{
					line-height: 40rpx;
					font-size: 30rpx;
					color: #040000;
				}
				.num{
					margin-top: 13rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #999;
				}
			}
		}
		.order-infor{
			padding: 24rpx 0 16rpx;
			margin-top: 30rpx;
			border-top: 1px solid #EEEEEE;
			.infor-item{
				display: flex;
				justify-content: space-between;
				line-height: 59rpx;
				.title{
					font-size: 26rpx;
					color: #999999;
				}
				.con{
					font-size: 26rpx;
					color: #070707;
				}
			}
		}
	}
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.menu-wrapper{
			padding-bottom: env(safe-area-inset-bottom) !important;
			padding-bottom: constant(safe-area-inset-bottom) !important;
		}
	}
	.menu-wrapper{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		padding: 12rpx 16rpx;
		background-color: #fff;
		display: flex;
		.text{
			flex: 1;
			margin-right: 25rpx;
			text-align: right;
			.title{
				line-height: 36rpx;
				font-size: 26rpx;
				color: #999999;
			}
			.con{
				margin-top: 5rpx;
				line-height: 42rpx;
				font-size: 32rpx;
				color: #ED612B;
			}
		}
		.btn{
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
		}
	}
	.place{
		height: 104rpx;
		visibility: hidden;
	}
	.payment-method-wrapper {
		margin: 0 25rpx 0;
	
		.title {
			line-height: 80rpx;
			font-size: 28rpx;
			color: #333333;
		}
	
		.payment-method {
			padding: 9rpx 0;
			background: #FFFFFF;
			border-radius: 10rpx;
	
			.payment-method-item {
				display: flex;
				align-items: center;
				padding: 24rpx 25rpx 24rpx 19rpx;
	
				.icon {
					width: 36rpx;
					height: 36rpx;
				}
	
				.text {
					flex: 1;
					margin-left: 19rpx;
					line-height: 36rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
</style>
